<template>
	<view class="wanl-order-list wanl-goods-comment padding-top-xs">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px'}">
				<view class="navigater flex align-center justify-between">
					<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="nav text-center">
						<view class="cu-item flex-sub" v-for="(item, index) in navList" :key="item.status"
							:class="{ 'text-green cur': tabCurrentIndex === index }" @tap="tabClick(index)">
							{{ item.text }}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="tab-content margin-bottom-xs" v-for="(tag, key) in navList" :key="tag.status">
			<!-- 空白页 -->
			<wanl-empty text="没有找到任何数据" v-if="tag.loaded && tag.orderList.length == 0" />
			<view class="list padding-bj bg-white margin-bottom-sm" v-for="(item,k) in tag.orderList"
				:key="item.id">
				<view class="userinfo flex justify-between align-center" v-if="item.user">
					<view class="avatar flex justify-start align-center">
						<view class="cu-avatar round margin-right-xs"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
						</view>
						<view class="text-sm">
							<view>{{ item.user.nickname }}</view>
							<view class="text-gray">{{ $wanlshop.timeToDate(item.createtime) }}</view>
						</view>
					</view>
					<wanl-rate :current="item.score" :disabled="true" />
				</view>
				<view class="details">
					<view class="margin-tb-sm">{{ item.content || '没有评价内容~'}}</view>
					<view class="text-green line-green text-sm">{{ item.type_text }}</view>
					<view class="text-gray text-sm">{{ item.difference }}</view>
				</view>
				
				<view class="flex-sub flex justify-start align-center">
					<view class="bg-img" v-for="(image, index) in item.images_text" :key="index"
						@tap="previewImage(item.images_text, index)"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view>
				</view>
				<view class="goods margin-top-lg" @tap="onGoods(item.source_id,tag.url)" v-if="item.servesinfo">
					<view class="cu-avatar"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.servesinfo.image, 66,66) + ')' }">
					</view>
					<view class="content margin-left-bj">
						<view class="text-cut">
							{{ item.servesinfo.title }}
						</view>
						<text class="text-min">{{item.type_text}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="tag.loadingType" :content-text="contentText" />
			<view class="edgeInsetBottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				windowHeight: 0,
				tabCurrentIndex: 0,
				navList: [{
						status: 1,
						text: '家政服务',
						loadingType: 'more',
						current_page: 1,
						orderList: [],
						url: '/pages/medicalcare/homemaking/product',
						http:'/addons/homeking/api.comment/my'
					},
					{
						status: 2,
						text: '医护上门',
						loadingType: 'more',
						current_page: 1,
						orderList: [],
						url: '/pages/medicalcare/visit/product',
						http:'/addons/homeking/api.comment/my'
					},
					{
						status: 3,
						text: '陪诊陪护',
						loadingType: 'more',
						current_page: 1,
						orderList: [],
						url: '/pages/medicalcare/accompany/product',
						http:'/addons/accompany/api.comment/my'
					},
					// {
					// 	status: 4,
					// 	text: '医养院',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: []
					// },
					// {
					// 	status: 5,
					// 	text: '长护险',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: []
					// },
					// {
					// 	status: 6,
					// 	text: '圈子',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: []
					// },
					// {
					// 	status: 7,
					// 	text: '商品',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: [],
					// 	url: '/pages/product/goods'
					// },
					// {
					// 	status: 8,
					// 	text: '团购',
					// 	loadingType: 'more',
					// 	current_page: 1,
					// 	orderList: [],
					// 	url: '/pages/apps/groups/goods'
					// }
				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				scrollLeft: 0
			};
		},
		onLoad(options) {
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = uni.upx2px(90);
			this.windowHeight = sys.windowHeight - uni.upx2px(90);
			this.loadData();
		},
		methods: {
			onGoods(id, url) {
				this.$wanlshop.to(`${url}?id=${id}`)
			},
			//获取订单列表
			async loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				// 获取列表
				await uni.request({
					url: navItem.http,
					data: {
						page: navItem.current_page
					},
					success: res => {
						let orderList = res.data.data;
						if(key == 'load') {
							this.orderList = [...this.orderList, ...orderList];
							this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
						} else if(key == 'refresh') {
							this.orderList = orderList;
							this.$refs.list.refreshSuccess({ list: this.orderList, total: res.data.total });
						}
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.scrollLeft = e.target.current * uni.upx2px(160)
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData('tabChange');
				this.scrollLeft = index * uni.upx2px(160)
			},
			//预览图片
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		height: 100%;
		background-color: #ededed;
	}

	.collect-container {
		&__head {
			.navigater {
				position: relative;

				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9999;

					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.nav .cu-item {
		width: 160rpx !important;
	}

	.nav .cu-item.cur {
		border: none;
		position: relative;

		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 34rpx;
			height: 4rpx;
			background: #4CBD66;
			bottom: 0;
			left: 50%;
			margin-left: -17rpx;
		}
	}

	.bg-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 16rpx;
	}

	.list {
		padding-bottom: 20rpx !important;

		.goods {
			border-radius: 6rpx;

			.content {
				view {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				text {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #555555;
					line-height: 34rpx;
					margin-top: 4rpx;
				}
			}
		}
	}

	.details {
		view {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
</style>